<template>
	<div>
		<div class="ui top segment" style="text-align: center; margin-bottom: 15px">
<!--      <h2 class="m-text-500">分类 {{ categoryName }} 下的文章</h2>-->
      <h3 class="m-text-500">选择并筛选</h3>
      <div>
        <a class="ui red label tag-item" style="margin-bottom: 10px;margin-right: 6px" 
           v-for="(item, index) in typeList" 
           :class="circuitTypeName === item.name ? 'active-type purple' : ''"
           @click="getBlogListPre(item.name)">{{ item.name }}</a>
      </div>
		</div>
		<BlogList v-if="blogList.length > 0" :getBlogList="getBlogList" :blogList="blogList" :totalPage="totalPage"/>
    <h3 class="ui header m-center" v-else>{{circuitTypeName}} 类别文章：博主正在努力编写中......</h3>
	</div>
</template>

<script>
	import BlogList from "@/components/blog/BlogList";
  import {getAllTypeList, getBlogListByCategoryName} from "@/api/category";

	export default {
		name: "Category",
		components: {BlogList},
		data() {
			return {
				blogList: [],
				totalPage: 0,
        typeList: [],
        circuitTypeName: '',
        typeName: ''
			}
		},
		watch: {
			//在当前组件被重用时，要重新获取博客列表
			'$route.fullPath'() {
				if (this.$route.name === 'category') {
					this.getBlogList()
				}
			}
		},
		created() {
      this.getTypeList();
			this.getBlogList()
		},
		computed: {
			categoryName() {
				// return this.$route.params.name
        this.circuitTypeName = this.$route.params.name;
        return this.circuitTypeName;
			}
		},
		methods: {
      getBlogListPre(typeName) {
        this.typeName = typeName;
        this.getBlogList();
      },
			getBlogList(pageNum) {
				getBlogListByCategoryName(this.typeName, pageNum).then(res => {
					if (res.code === 200) {
						this.blogList = res.data.list
						this.totalPage = res.data.totalPage
						this.$nextTick(() => {
							Prism.highlightAll()
						})
					} else {
						this.msgError(res.msg)
					}
          this.circuitTypeName = this.typeName;
				}).catch(() => {
					this.msgError("请求失败")
				})
			},
      getTypeList() {
        getAllTypeList().then(res => {
          this.typeList = res.data;
        })
      }
		}
	}
</script>

<style scoped>

</style>